import Typography from "@/pages/OrderModule/common/components/Typography";
import { Alert, Checkbox, message, Button } from "antd";
import { useEffect, useMemo, useCallback, useState } from "react";
import CommonTable from "@/components/CommonTable";
import CommonLoading from "@/components/CommonLoading";
import CommonModal from "@/components/CommonModal";
import { cloneDeep, find } from "lodash";
import IconFont from "@/components/IconFont";
import InvertButton from "../../../../../../common/components/InvertButton/index";
import styles from "./index.module.less";

const descEl = (
	<Typography as="s1">
		选择哪个字段，订单列表就会显示哪个字段。锁定的字段会移动到前面并且固定。
		<Typography as="s1" color="#999">
			(上下可拖动字段排序)
		</Typography>
	</Typography>
);

/** 列表字段设置 */
function EditColumnsCode(props) {
	const { updatePageConfig, realColumns, initColumns, handleOk, handleCancel } = props;
	const [loading, setLoading] = useState(false);
	const newRealColumns = cloneDeep(realColumns);
	const newinitColumns = cloneDeep(initColumns);
	const [showList, setShowList] = useState(newRealColumns); //更改之后的数据
	const [isOk, setIsOk] = useState(false);
	const [open, setOpen] = useState(false);
	console.log('showList', showList)

	useEffect(() => {
		setOpen(true);
	}, []);

	//全部展示
	const checkAllRender = useMemo(() => {
		if (showList.every(item => item.checked == true)) {
			return true;
		} else {
			return false;
		}
	}, [showList]);

	//部分选择展示
	const indeterminateRender = useMemo(() => {
		if (showList.some(item => item.checked == false) && !showList.every(item => item.checked == false)) {
			return true;
		} else {
			return false;
		}
	}, [showList]);

	//变更单个显示隐藏
	const changeDisplay = (e, r) => {
		const val = e.target.checked;
		const arr = cloneDeep(showList);
		const obj = find(arr, ["name", r.name]);
		if (obj) {
			obj.checked = val;
		}
		setShowList(arr);
	};

	//点击全选
	const onCheckAllChange = e => {
		const val = e.target.checked;
		const arr = [...showList];
		if (val) {
			arr.map(v => (v.checked = true));
		} else {
			arr.map(v => (v.checked = false));
		}
		setShowList(arr);
	};

	//点击反选
	const handReverseSelect = () => {
		const arr = [...showList];
		arr.map(v => (v.checked = v.lock == false ? !v.checked : v.checked));
		setShowList(arr);
	};

	/**
	 * action: lock | unlock
	 */
	const onMove = useCallback(
		(record, index, action) => {
			//
			const newTableData = cloneDeep(showList);
			// removing the item
			newTableData.splice(index, 1);

			if (action == "lock") {
				// 如果锁定的是下面的字段保存后该字段会自动上移到上面其他锁定字段的下面及未锁定字段的前面，并且锁定的字段不管是否勾选显示都代表显
				const i = newTableData.findIndex(e => e.lock !== true);
				// pushing in the new position
				record.lock = true;
				record.checked = true;
				newTableData.splice(i, 0, cloneDeep(record));
			} else {
				const i = newTableData.findIndex((e, i) => i >= index && e.lock !== true);
				const lastUnlockIndex = i > -1 ? i : showList.length - 1;
				record.lock = false;
				newTableData.splice(lastUnlockIndex, 0, cloneDeep(record));
			}
			setShowList(newTableData);
		},
		[showList]
	);

	const onOk = async () => {
		setLoading(true);
		updatePageConfig("columns", showList, success => {
			setLoading(false);
			if (success) {
				message.success("操作成功");
				setIsOk(true);
				setOpen(false);
			}
		});
	};

	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		if (isOk) {
			handleOk();
		} else {
			handleCancel();
		}
	};

	const columns = [
		{
			title: "筛选字段",
			dataIndex: "name"
			// width: 150
		},
		{
			title: (
				<div style={{ display: "flex", alignItems: "center" }}>
					是否显示：
					<Checkbox
						indeterminate={indeterminateRender}
						checked={checkAllRender}
						onChange={onCheckAllChange}
						style={{ verticalAlign: "bottom" }}
					>
						全选
					</Checkbox>
					<InvertButton onClick={handReverseSelect} />
				</div>
			),
			dataIndex: "checked",
			width: 240,
			render: (t, record, index) => {
				return (
					<div className={styles.recordItem}>
						<Checkbox disabled={record.lock} checked={t} onChange={e => changeDisplay(e, record)} />
						<div className={styles.hover}>
							{!record.lock && <IconFont type="icona-lujing112" onClick={() => onMove(record, index, "lock")} />}
							{record.lock && <IconFont type="icona-lujing14" onClick={() => onMove(record, index, "unlock")} />}
						</div>
					</div>
				);
			}
		}
	];

	const TableProps = {
		data: showList,
		size: "small",
		columns,
		rowKey: "name",
		bordered: true,
		isSortData: true,
		scroll: {
			y: "45vh"
		},
		onDragEnd(val) {
			setShowList(val);
		}
	};

	return (
		<CommonModal
			width="530px"
			title="列表字段设置"
			open={open}
			onOk={onOk}
			onCancel={onCancel}
			afterClose={afterClose}
			footer={
				<>
					<Button onClick={onCancel}>取消</Button>
					<Button onClick={() => setShowList(newinitColumns)}>恢复默认设置</Button>
					<Button type="primary" onClick={onOk}>
						保存
					</Button>
				</>
			}
		>
			<Alert style={{ marginBottom: "16px" }} message={descEl} />
			<CommonTable {...TableProps} />
			<CommonLoading loading={loading} />
		</CommonModal>
	);
}

export default EditColumnsCode;
